Class xbTreeWidgetStatic — Cross Browser Tree Widget with DHTML Support for Gecko based browsers, Internet Explorer 4+, and Static HTML support for Opera 5+, Netscape Navigator 4.x.
class xbTreeWidgetStatic
{
public:
xbTreeWidgetStatic(Object handles, Object labels, String classprefix);
// properties
Number id;
Object handles;
Object labels;
String classprefix;
Array children;
// methods
xbTreeWidgetStatic appendChild(xbTreeWidgetStatic child);
String toHTML();
}
// static Class properties
Number xbStaticTreeWidget._id;
Object xbStaticTreeWidget._hash;
Boolean xbStaticTreeWidget._dynamic;
// global functions
Node xbGetNextElement(Node node);
Boolean xbTreeWidgetStaticToggleHandle(HTMLElement handlediv);
xbTreeWidgetStatic xbCreateTreeWidgetStaticFromObject(
Function getChildren,
Function getHandles,
Function getLabels,
Object obj,
String classprefix);
Uses:
provides debugging and trace facilities for use in maintaining the script or learning more about how it functions.
xbTreeWidgetStatic is a JavaScript object which allows the flexible construction of HTML Tree Widgets using a simple API along with HTML. DHTML manipulation of the tree is possible in browsers which support the Internet Explorer proprietary HTMLElement.innerHTML property. For browsers which do not support this property, xbTreeWidgetStatic will generate a simple hierarchal layout.
xbTreeWidgetStatic is designed to be used before a page load event fires by writing the HTML into the document. xbTreeWidgetStatic is Static because it can not modify the contents of the Tree widget after it has been written to the document.
xbTreeWidgetStatic requires the use of JavaScript 1.2 in it's implementation of it's data structures.
Script Location/Invocation. xbTreeWidgetStatic must be used inside the BODY Tag to document.write the HTML representation of the tree into the document. The xbTreeWidgetStatic itself must be constructed in full either in the HEAD of the document or prior to the document.write in the BODY.
Netscape Navigator 4. Netscape Navigator 4 is supported for a simple Non-DHTML version of the Tree Widget.
Opera 5+. Opera 5 and above are supported for a simple Non-DHTML version of the Tree Widget.
See xbDebug manpage for more information on using the xb Debugging facilities.
Example 1. Basic Example
This example illustrates the basic steps for creating a simple tree widget using xbTreeWidgetStatic
<html>
<head>
<title>xbTreeWidgetStatic Example</title>
<!--
Define CSS classes which govern how the tree widget is displayed.
-->
<style type="text/css">
div.treewidgetcontainer
{
}
/* make the cursor a pointer when over the item in a tree widget */
div.treewidgethandle
{
cursor: pointer; cursor: hand;
}
/* indent each level in the tree by two character positions */
div.treewidgetchildren
{
position: relative;
left: 2em;
display:none;
}
</style>
<!-- include the scripts needed for xbTreeWidgetStatic -->
<script language="javascript" src="/lib/js/xbDebug.js"></script>
<script language="javascript" src="/lib/js/xbTreeWidgetStatic.js"></script>
<script language="javascript">
// define a variable to hold the reference to your
// tree widget.
var xbtreewidgetroot;
var xbtreewidget;
// create the root of the tree
xbtreewidgetroot = new xbTreeWidgetStatic(
{ open: 'insert open handle html here', closed: 'insert closed handle html here'},
{ open: 'insert open label html here', closed: 'insert closed label html here'}
);
// add children to the tree
xbtreewidget = xbtreewidgetroot.appendChild( new xbTreeWidgetStatic( ... ) );
xbtreewidget.appendChild( new xbTreeWidgetStatic( ... ) );
xbtreewidget.appendChild( new xbTreeWidgetStatic( ... ) );
</script>
</head>
<body>
<script language="javascript">
// output the HTML which represents the tree
document.write(xbtreewidgetroot.toHTML());
</script>
</body>
</html>
Example 2. Simple Example 01
This example illustrates the basics of a working xbTreeWidgetStatic widget using simple text handles and labels.
Example 3. Simple Example 02
This example expands on the Simple Example 01 by using images and styled labels.
Example 4. Object Example 01
This example illustrates the basics of a working xbTreeWidgetStatic widget created from a JavaScript object using simple text handles and labels. Note this example will not work in Navigator 4 since it uses a DOM object not available in Navigator 4.
Example 5. Object Example 02
This example expands on the Object Example 01 by using images and styled labels.
Example 6. Combined Example 01
This example illustrates using more than one xbTreeWidgetStatic on a page by combining the Simple and Object examples.
The display of xbTreeWidgetStatic trees are controlled via the use of three CSS classes. These class names can be customized by specifying the classprefix when creating the xbTreeWidgetStatic. If not otherwise specified, classprefix defaults to 'treewidget'.
Name of CSS class for the container of the Tree Widget. Use this to position the tree widget or to style the widget as a whole.
Name of CSS class for the handles in a Tree Widget. Use this to style the widget's handles.
Name of CSS class for the child nodes in a Tree Widget. Use this to style the widget's children. For example, you can have an indented list by specifying position: relative; left:2em; or have a vertical collapsing list by specifying position: relative; left: 0em;
readonly Number - unique number for a particular instance of an xbTreeWidgetStatic which is managed via the constructor and the static class property xbTreeWidgetStatic._id. This property is used to generate unique ID's for the HTML Elements used to represent the tree data.
readonly Object - with two properties, open and closed each containing a string of HTML to be used to represent the handle of an xbTreeWidgetStatic node in the open or closed state respectively.
readonly Object - with two properties, open and closed each containing a string of HTML to be used to represent the label of an xbTreeWidgetStatic node in the open or closed state respectively.
readonly String - containing the prefix of CSS classnames to be used when displaying the DHTML version of the Tree Widget. If not specified elsewhere the default value is 'treewidget'.
readonly Array - containing the children of the xbTreeWidgetStatic node.
Constructs an instance of the xbTreeWidgetStatic class.
Arguments:
Object handles - contains two properties open and closed which contain the HTML strings used to represent the Tree Widget's handle in the open and closed state respectively.
Object labels - contains two properties open and closed which contain the HTML strings used to represent the Tree Widget's handle in the open and closed state respectively.
String classprefix - prefix of CSS classes used to style the Tree Widget. By specifying different classprefixes for different Tree Widgets on the same page you can customize the appearance of each Tree independently of the others.
Returns: nothing
Support. Gecko/Netscape 6.x, Netscape Navigator 4+, Internet Explorer 4+, Opera
append a xbTreeWidgetStatic to the list of child nodes for this node
Arguments: xbTreeWidgetStatic to be added as a child of this xbTreeWidgetStatic node.
Returns: xbTreeWidgetStatic node that was appended.
returns the HTML representation of the xbTreeWidgetStatic node and it's children.
Arguments: None
Returns: String containing the HTML of the Tree Widget.
Used internally by the Tree Widget DHTML routines to locate the next sibling element.
Arguments: HTMLElement element - starting point in the search.
Returns: HTMLElement that is the next sibling of the specified element.
Support. Gecko/Netscape 6.x, Internet Explorer 5+, DOM HTML Compliant browsers
Create a TreeWidget from a hierarchal JavaScript object.
Arguments:
Function getChildren - reference to function which takes a JavaScript object as input and returns an array containing the list of objects/properties that are to be displayed as child nodes. Note that xbTreeWidgetStatic does not support recursive JavaScript data structures since all nods of the Tree Widget are added at construction. If you return a recursive reference in the list of child nodes you will cause infinite recursion... So DON'T DO THAT!
Function getHandles - reference to function which takes a JavaScript object and a classprefix as input and returns an object which contains open and closed properties containing the HTML representing the Tree Widget's handle in open and closed states respectively.
Function getLabels - reference to function which takes a JavaScript object and a classprefix as input and returns an object which contains open and closed properties containing the HTML representing the Tree Widget's label in open and closed states respectively.
Object obj - reference to the JavaScript object to be displayed as a Tree Widget.
String classprefix - prefix of CSS classnames to be used when displaying the Tree Widget.
Returns: xbTreeWidgetStatic tree that was created.